<template>
  <div class="header" id="top">
      <div v-show="!isSearch">
        <div class="logo">    
            <img src="../assets/images/logo.png" alt="" />
        </div>
        <div class="status">
            <span class="iconfont icon-shizhong" @click="clock"></span>
            <span class="iconfont icon-xinhao-01" @click="toHot"></span>
            <span class="iconfont icon-sousuo1" @click="search"></span>
        </div>
    </div>
    <div class="search" v-show="isSearch">
        <form action="/">
            <van-search
                background="#000"
                v-model="value"
                show-action
                placeholder="输入影片关键词..."
                @search="onSearch"
                @cancel="onCancel"
            />
        </form>
    </div>
    <div class="histoy" v-if="isclock">
        <v-history @close="close"></v-history>
    </div>
  </div>
  <div class="nav">
      <ul>
          <li><router-link to="/home">首页</router-link></li>
          <li><router-link to="/movie">电影</router-link></li>
          <li><router-link to="/tv">连续剧</router-link></li>
          <li><router-link to="/variety">综艺</router-link></li>
          <li><router-link to="/anime">动漫</router-link></li>
      </ul>
  </div>
</template>

<script>
import  { Toast }  from 'vant'
import { reactive, ref, toRefs } from '@vue/reactivity'
import {useRouter} from 'vue-router'
import Vhistory from './History.vue'
export default {
    components:{
        "v-history":Vhistory
    },
    emits:['refesh'],
    setup(props,context){
        const router = useRouter()
        const value = ref('');
        const state = reactive({
            isSearch:false,
            isclock:false
        })
        const clock = ()=>{
            state.isclock =!state.isclock
        }
        const onSearch = (val) => {
            if (state.isSearch) {
                context.emit('refesh')
            }
            router.push({path:`/search/${val}`})
            Toast(val)
        };
        const onCancel = () =>{ 
            state.isSearch = false    
            Toast('取消')
        };
        const close =()=> {
            state.isclock =false
        }
        const search = () =>{
            state.isSearch = true
        }
        const toHot = () =>{
            router.push({name:'hot'})
        }
        return {
        value,
        onSearch,
        onCancel,
        search,
        ...toRefs(state),
        toHot,
        clock,
        close
        };
    }
}
</script>

<style lang="less">
.header{
    margin: 0;
    padding: 0;
    height: 50px;
    background: #000000;
    .search{
        .van-search__content{
            background: #000000;
            .van-cell{
                background: #000000;
                .van-field__control{
                    font-size: 15px;
                    color: #fff;
                }
            }
        }
        .van-search__action{
            color: #fff;
        }
    }
    .logo{
        float: left;
        margin-left: 10px;
        margin-top: 5px;
        img{
            height: 40px;
        }
    }
    .status{
        float: right;
        color: #fff;
        .iconfont{
            line-height: 50px;
            margin-right: 20px;
            font-size: 25px;
        }
        .icon-sousuo1{
            margin-right: 10px;
        }
    }
}
.nav{
        height: 50px;
        padding: 0;
        background: #111111;
        width: 100%;
        border-top: 1px solid #111111;
        border-bottom: 1px solid #111111;
        ul{
            list-style: none;
            display: flex;
            justify-content: space-around;
            li{
                display: inline-block;
                text-align: center;
                position: relative;
                font-size: 15px;
                line-height: 50px;
                font-weight: 700;
                a{
                    color: #999;
                }
                .router-link-active {
                    color: #FDC81F;
                    text-decoration: none;
                }
                .router-link-active::after{
                    content: "●";
                    color: #FDC81F;
                    position: absolute;
                    top: 14px;
                    left: 12px;
                }
            }
        }
}
</style>